<template>
  <div>
    <el-menu
      background-color="#EDEDF4"
      text-color="#000000"
      active-text-color="#2587F6"
      class="home_left_menu"
      :default-active="$route.path"
      router
    >
      <div class="home_menu_title">
        <span style="margin-right: 5px">首页</span>
        <el-icon class="el-icon-s-home"/>
      </div>
      <el-menu-item index="/">公告</el-menu-item>
      <el-submenu index='/appoiment'>
        <span slot="title">核酸检测预约</span>
        <el-menu-item-group>
          <el-menu-item index="/appoiment">预约</el-menu-item>
          <el-menu-item index="/historyAppoiment">历史预约</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item index="/queryResult">检测结果查询</el-menu-item>
    </el-menu>
    <div class="home_main_box">
      <router-view/>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
  }
}
</script>

<style lang="scss">
.home_left_menu {
  font-weight: bold;
  position: fixed;
  top: 60px;
  left: 64px;
  height: calc(100% - 60px);
  width: 150px;
  overflow: hidden;
}

.home_main_box {
  position: fixed;
  top: 60px;
  left: 215px;
  height: calc(100% - 60px);
  width: calc(100% - 215px);
  overflow: auto;
}

.home_menu_title {
  font-size: 22px;
  height: 60px;
  line-height: 60px;
  padding-left: 20px;
  cursor: pointer;
  background: #DCDFE6;
}

.el-submenu__title {
  height: 50px ;
  line-height: 50px;
}

.el-menu-item-group__title {
  padding: 0 0 0 0;
}

</style>

<style lang="scss" scoped>
.el-menu {
  border-right: 0px;
}

.el-menu-item {
  height: 50px;
  line-height: 50px;
}

.el-menu-item.is-active {
  background-color: #FFFFFF !important;
}

</style>